<template>
	<button :class="
                'custom-class theme-class zan-btn ' +
                (inGroup ? 'zan-btn--group' : '') +
                ' ' +
                (isLast ? 'zan-btn--last' : '') +
                ' ' +
                (size ? 'zan-btn--' + size : '') +
                ' ' +
                (size === 'mini' ? 'zan-btn--plain' : '') +
                ' ' +
                (plain ? 'zan-btn--plain' : '') +
                ' ' +
                (type ? 'zan-btn--' + type : '') +
                ' ' +
                (loading ? 'zan-btn--loading' : '') +
                ' ' +
                (disabled ? 'zan-btn--disabled' : '')
            " :disabled="disabled" hover-class="button-hover" :open-type="openType" :app-parameter="appParameter"
		:hover-stop-propagation="hoverStopPropagation" :hover-start-time="hoverStartTime"
		:hover-stay-time="hoverStayTime" :lang="lang" :session-from="sessionFrom" :send-message-title="sendMessageTitle"
		:send-message-path="sendMessagePath" :send-message-img="sendMessageImg" :show-message-card="showMessageCard"
		@tap="handleTap" @contact="bindcontact" @getuserinfo="bindgetuserinfo" @getphonenumber="bindgetphonenumber"
		@error="binderror" @opensetting="bindopensetting">
		<slot></slot>
	</button>
</template>

<script>
	'use strict';

	var nativeButtonBehavior = require('./native-button-behaviors');

	export default {
		data() {
			return {
				inGroup: false,
				isLast: false,
			};
		},
		externalClasses: ['custom-class', 'theme-class'],
		mixins: [nativeButtonBehavior],
		relations: {
			'../btn-group/index': {
				type: 'parent',
				linked: function linked() {
					this.setData({
						inGroup: true
					});
				},
				unlinked: function unlinked() {
					this.setData({
						inGroup: false
					});
				}
			}
		},
		props: {
			type: {
				type: String,
				default: ''
			},
			size: {
				type: String,
				default: ''
			},
			plain: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleTap: function handleTap() {
				if (this.disabled) {
					this.$emit('disabledclick');
					return;
				}

				this.$emit('btnclick');
			},

			switchLastButtonStatus: function switchLastButtonStatus() {
				var isLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
				this.setData({
					isLast: isLast
				});
			},

			bindcontact() {
				console.log('占位：函数 bindcontact 未声明');
			},

			bindgetuserinfo() {
				console.log('占位：函数 bindgetuserinfo 未声明');
			},

			bindgetphonenumber() {
				console.log('占位：函数 bindgetphonenumber 未声明');
			},

			binderror() {
				console.log('占位：函数 binderror 未声明');
			},

			bindopensetting() {
				console.log('占位：函数 bindopensetting 未声明');
			}
		}
	};
</script>
<style lang="scss">
	.zan-btn {
		position: relative;
		color: $uni-text-color;
		background-color: #fff;
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 2px;
		font-size: 16px;
		line-height: 45px;
		height: 45px;
		box-sizing: border-box;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		overflow: visible;
	}

	.zan-btn--group {
		margin-bottom: 10px;
	}

	.zan-btn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(0.5);
		transform: scale(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border: 0 solid #e5e5e5;
		border-width: 1px;
		border-radius: 4px;
	}

	.zan-btn--primary {
		color: $uni-text-color-inverse;
		background-color: #4b0;
	}

	.zan-btn--primary::after {
		border-color: #0a0;
	}

	.zan-btn--warn {
		color: $uni-text-color-inverse;
		background-color: #f85;
	}

	.zan-btn--warn::after {
		border-color: #f85;
	}

	.zan-btn--danger {
		color: $uni-text-color-inverse;
		background-color: #f44;
	}

	.zan-btn--danger::after {
		border-color: #e33;
	}

	.zan-btn--small {
		display: inline-block;
		height: 30px;
		line-height: 30px;
		font-size: 12px;
	}

	.zan-btn--small.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px;
	}

	.zan-btn--mini {
		display: inline-block;
		line-height: 21px;
		height: 22px;
		font-size: 10px;
		padding-left: 5px;
		padding-right: 5px;
	}

	.zan-btn--mini.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px;
	}

	.zan-btn--large {
		border-radius: 0;
		border: none;
		line-height: 50px;
		height: 50px;
	}

	.zan-btn--large.zan-btn--group {
		margin-bottom: 0;
	}

	.zan-btn--plain.zan-btn {
		background-color: transparent;
	}

	.zan-btn--plain.zan-btn--primary {
		color: #06bf04;
	}

	.zan-btn--plain.zan-btn--warn {
		color: #f60;
	}

	.zan-btn--plain.zan-btn--danger {
		color: #f44;
	}

	.button-hover {
		opacity: 0.9;
	}

	.zan-btn--loading {
		color: transparent;
		opacity: 1;
	}

	.zan-btn--loading::before {
		position: absolute;
		left: 50%;
		top: 50%;
		content: ' ';
		width: 16px;
		height: 16px;
		margin-left: -8px;
		margin-top: -8px;
		border: 3px solid #e5e5e5;
		border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
		border-radius: 8px;
		box-sizing: border-box;
		-webkit-animation: btn-spin 0.6s linear;
		animation: btn-spin 0.6s linear;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
	}

	.zan-btn--danger.zan-btn--loading::before,
	.zan-btn--primary.zan-btn--loading::before,
	.zan-btn--warn.zan-btn--loading::before {
		border-color: #fff rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1);
	}

	@-webkit-keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	@keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0);
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg);
		}
	}

	.zan-btn.zan-btn--disabled {
		color: $uni-text-color-grey !important;
		background: $uni-bg-color-grey !important;
		border-color: #e5e5e5 !important;
		cursor: not-allowed !important;
		opacity: 1 !important;
	}

	.zan-btn.zan-btn--disabled::after {
		border-color: #e5e5e5 !important;
	}

	.zan-btn--group.zan-btn--last {
		margin-bottom: 0;
		margin-right: 0;
	}
</style>
